<template>
  <div>
    <Drawer
        :title="name"
        v-model="drawer"
        :mask="false"
        :closable="false"
        :height="this.size"
        :transfer="false"
        :lock-scroll="false"
        :z-index="3"
        placement="bottom">
      <XHandle class="myxhandle" @widthChange="widthChange"/>
      <div class="debug" style="height: 93%">
        <el-row style="height:6%">
          <el-col :span="23">
            <div class="grid-content bg-purple">&nbsp;</div>
          </el-col>
          <el-col :span="1">
            <div class="grid-content bg-purple-light">
            <span @click="this.close">
                          <svg t="1670404897606" class="icon" viewBox="0 0 1024 1024" version="1.1"
                               xmlns="http://www.w3.org/2000/svg" p-id="2814" width="20" height="20"><path
                              d="M953.6 453.845333l-62.933333-57.685333C766.848 531.328 660.394667 597.333333 512.426667 597.333333c-144.341333 0-255.146667-69.589333-378.069334-200.362666l-62.208 58.453333C209.749333 601.770667 338.56 682.666667 512.469333 682.666667c177.322667 0 302.677333-77.738667 441.130667-228.821334z"
                              fill="#525A65" p-id="2815"></path></svg>
            </span>
            </div>
          </el-col>
        </el-row>

        <el-row style="height:95%">
          <el-col :span="0.1" style="height:100%" class="debug">
            <div style=" text-align:left;">

                <span @click="this.run()" title="运行">
                  <svg t="1671007269955" class="icon" viewBox="0 0 1024 1024" version="1.1"
                       xmlns="http://www.w3.org/2000/svg" p-id="2972" width="20" height="20"><path
                      d="M924.8 337.6a449.344 449.344 0 1 0-828.288 348.8 449.344 449.344 0 0 0 828.288-348.8z m-149.76 437.376A371.968 371.968 0 1 1 883.968 512a369.536 369.536 0 0 1-109.056 263.04z m-64.768-302.08l-233.28-178.56a48 48 0 0 0-77.184 38.08v357.184a48 48 0 0 0 77.184 38.144l233.28-178.624a48 48 0 0 0 0-76.224z"
                      fill="#000000" p-id="2973"></path></svg>
            </span>

            </div>
            <div style=" text-align:left;">

                <span @click="this.resume" title="恢复">

    <svg t="1704853471886" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
         p-id="3898" width="20" height="20"><path
        d="M512 1024c-281.6 0-512-230.4-512-512s230.4-512 512-512 512 230.4 512 512S793.6 1024 512 1024zM512 57.6C262.4 57.6 57.6 262.4 57.6 512s204.8 454.4 454.4 454.4 454.4-204.8 454.4-454.4S761.6 57.6 512 57.6z"
        fill="#2c2c2c" p-id="3899"></path><path d="M512 332.8 832 512l-320 179.2L512 332.8z" fill="#2c2c2c"
                                                p-id="3900"></path><path d="M384 320l64 0 0 384-64 0 0-384Z"
                                                                         fill="#2c2c2c" p-id="3901"></path></svg>
                </span>

            </div>

            <div style=" text-align:left;">

                <span @click="this.resumeAll" title="恢复所有">
                 <svg t="1704855986001" class="icon" viewBox="0 0 1024 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="4450" width="20" height="20"><path
                     d="M512.474074 937.244444c-55.371852 0-109.131852-10.903704-159.762963-32.237037-48.924444-20.66963-92.728889-50.251852-130.465185-87.988148s-67.318519-81.635556-87.988148-130.465185c-21.428148-50.631111-32.237037-104.391111-32.237037-159.857778 0-11.757037 9.576296-21.333333 21.333333-21.333333s21.333333 9.576296 21.333333 21.333333c0 202.903704 164.977778 367.881481 367.786667 367.881482s367.786667-165.072593 367.786667-367.881482c0-202.903704-164.977778-367.881481-367.786667-367.881481-113.114074 0-218.358519 51.01037-288.616296 139.851852-7.300741 9.197037-20.764444 10.808889-29.961482 3.508148-9.197037-7.300741-10.808889-20.764444-3.508148-29.961482 37.641481-47.597037 86.091852-86.85037 140.231111-113.682963 56.794074-28.16 118.044444-42.382222 181.854815-42.382222 55.371852 0 109.131852 10.903704 159.762963 32.237037 48.924444 20.66963 92.728889 50.251852 130.465185 87.988148 37.641481 37.736296 67.318519 81.635556 87.988148 130.465186 21.428148 50.631111 32.237037 104.391111 32.237037 159.857777 0 55.371852-10.808889 109.226667-32.237037 159.857778-20.66963 48.924444-50.251852 92.823704-87.988148 130.465185-37.736296 37.736296-81.540741 67.318519-130.465185 87.988148-50.631111 21.333333-104.391111 32.237037-159.762963 32.237037z"
                     p-id="4451"></path><path
                     d="M207.075556 306.820741c-11.757037 0-21.333333-9.576296-21.333334-21.333334V105.244444c0-11.757037 9.576296-21.333333 21.333334-21.333333s21.333333 9.576296 21.333333 21.333333v180.242963c0 11.757037-9.481481 21.333333-21.333333 21.333334z"
                     p-id="4452"></path><path
                     d="M387.318519 306.820741H207.075556c-11.757037 0-21.333333-9.576296-21.333334-21.333334s9.576296-21.333333 21.333334-21.333333h180.242963c11.757037 0 21.333333 9.576296 21.333333 21.333333s-9.576296 21.333333-21.333333 21.333334z"
                     p-id="4453"></path></svg>
                </span>

            </div>

            <div style=" text-align:left;">

                <span @click="this.resetParamFunc" title="重置参数">
              <svg t="1704879538972" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="5496" width="20" height="20"><path
                  d="M867.28192 302.39744c-46.34112-72.25344-114.41152-127.00672-196.84864-158.34624a427.76064 427.76064 0 0 0-57.74848-17.39264l14.27456-9.23136c9.44128-6.10304 15.83616-15.44704 18.01728-26.31168a40.0128 40.0128 0 0 0-6.30784-30.73024c-7.79264-11.37664-20.81792-18.16576-34.8416-18.16576a42.3424 42.3424 0 0 0-23.08096 6.80448L463.81056 124.63104c-1.28 0.8192-2.49856 1.70496-3.59936 2.59072a25.22112 25.22112 0 0 0-0.98304 0.8448 42.42944 42.42944 0 0 0-2.24768 2.048 41.1392 41.1392 0 0 0-1.1264 1.18784c-0.56832 0.6144-1.13152 1.23392-1.67936 1.8944a46.90432 46.90432 0 0 0-3.42528 4.8384c-0.4608 0.74752-0.88576 1.52064-1.37728 2.46784l-0.64 1.27488c-0.43008 0.9216-0.82944 1.85856-1.18784 2.81088l-0.40448 1.07008a41.8816 41.8816 0 0 0-0.9472 3.14368l-0.26112 0.97792c-0.26112 1.1264-0.47104 2.26816-0.63488 3.42016l-0.2048 1.49504a39.7312 39.7312 0 0 0-0.06144 7.87968l0.0768 0.67072c0.03072 0.26624 0.0768 0.53248 0.12288 0.82432 0.13312 1.03424 0.2816 2.06336 0.47616 2.98496 0.0768 0.37888 0.16896 0.74752 0.29184 1.21856 0.25088 1.03424 0.51712 2.05824 0.82944 3.02592 0.1024 0.31744 0.21504 0.63488 0.38912 1.08032 0.36352 1.024 0.74752 2.02752 1.13664 2.88256 0.16384 0.37376 0.34304 0.74752 0.5632 1.17248 0.44544 0.92672 0.9216 1.8432 1.46944 2.78528l0.67072 1.09568a39.17824 39.17824 0 0 0 4.1472 5.50912l84.992 90.0608a42.4448 42.4448 0 0 0 30.7968 13.17888 42.36288 42.36288 0 0 0 28.21632-10.69056c8.32512-7.424 13.16352-17.57696 13.63456-28.58496a40.16128 40.16128 0 0 0-11.08992-29.54752l-14.19264-15.03744a339.38432 339.38432 0 0 1 52.52608 15.2832c132.39296 50.32448 213.98016 175.07328 203.01312 310.41024a40.18176 40.18176 0 0 0 9.60512 29.53216 41.89184 41.89184 0 0 0 28.9024 14.592c1.11104 0.09216 2.21184 0.12288 3.30752 0.12288 21.69344 0 40.02304-16.58368 41.73312-37.75488 6.5792-81.54112-14.4896-164.99712-59.3664-234.99264z m-277.08416 550.7072l0.01024-0.28672-0.08704-0.53248a23.04 23.04 0 0 0-0.24576-1.8688 32.8704 32.8704 0 0 0-0.77824-4.13696 43.59168 43.59168 0 0 0-0.74752-2.69312l-0.43008-1.2288a36.9408 36.9408 0 0 0-1.16224-2.88768l-0.51712-1.10592a42.0352 42.0352 0 0 0-1.59744-2.95424l-0.4608-0.75776a45.16352 45.16352 0 0 0-1.94048-2.85696l-0.49152-0.65024a38.8352 38.8352 0 0 0-2.26816-2.67264l-0.50688-0.54784a40.064 40.064 0 0 0-3.54304-3.30752l-93.63456-79.32928a42.368 42.368 0 0 0-27.4176-10.0096 42.28096 42.28096 0 0 0-31.49312 13.94688 40.1408 40.1408 0 0 0-10.33216 29.78304 40.20736 40.20736 0 0 0 8.38144 22.02112 331.30496 331.30496 0 0 1-20.64384-7.07072c-124.99456-47.50336-205.04576-161.08032-203.95008-289.34144 0.09216-11.008-4.21888-21.376-12.1344-29.19936-7.83872-7.74144-18.28864-12.05248-29.7728-12.14464-22.91712 0-41.71264 18.24256-41.9072 40.65792-0.66048 78.08 22.8352 153.8816 67.95264 219.21792 46.08 66.72896 111.59552 117.64736 189.4656 147.24096a425.99424 425.99424 0 0 0 70.58432 20.08064l-26.53184 21.62176c-8.66816 7.06048-13.97248 17.00352-14.93504 28.00128a40.15616 40.15616 0 0 0 9.74336 29.97248 42.22976 42.22976 0 0 0 32.0256 14.53568 42.52672 42.52672 0 0 0 26.79808-9.49248l107.78112-87.81824 0.62464-0.56832a40.30976 40.30976 0 0 0 7.58272-8.63744l0.74752-1.15712c0.47104-0.768 0.90112-1.57696 1.44384-2.6112l0.55296-1.08032c0.47616-1.00864 0.90112-2.03776 1.24928-2.9696l0.36352-0.9216c0.9728-2.77504 1.64352-5.64224 2.00704-8.56064 0.04608-0.32256 0.06656-0.64512 0.08704-0.96256 0.09728-0.93184 0.1536-1.85856 0.18432-2.7904l0.03072-0.68096c0-0.61952-0.02048-1.23392-0.07168-1.84832a11.56608 11.56608 0 0 0-0.01536-1.39776z m-401.152-405.05856h164.93056c46.70464 0 84.70016-36.64896 84.70016-81.69472V208.6144c0-45.04064-37.99552-81.6896-84.70016-81.6896H189.04576c-46.70464 0-84.70016 36.64384-84.70016 81.6896v157.73696c0 45.04576 38.00064 81.69472 84.70016 81.69472zM177.92 208.6144c0-5.28896 5.1968-9.92256 11.12576-9.92256h164.93056c5.92896 0 11.12576 4.63872 11.12576 9.92256v157.73696c0 5.29408-5.1968 9.9328-11.12576 9.9328H189.04576c-5.92896 0-11.12576-4.64384-11.12576-9.9328V208.6144z m662.0416 392.064h-164.93056c-26.34752 0-47.90784 20.63872-47.90784 45.80864v157.75744c0 25.18528 21.56032 45.824 47.90784 45.824h164.93056c26.36288 0 47.91296-20.63872 47.91296-45.824v-157.75744c0-25.1648-21.55008-45.80864-47.91296-45.80864z"
                  fill="#2c2c2c" p-id="5497"></path></svg>
                </span>

            </div>
          </el-col>
          <el-col :span="6" style="height:100%">
            <div style="width: 100%; height: 100%;text-align:left;" class="debug" id="editorFlag">
              <div style="position: absolute;left: 400px;top:15px;z-index: 9990" id="lvv">
                 <span @click="this.jsonInputMax">
              <svg t="1671007574107" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="3914" data-spm-anchor-id="a313x.7781069.0.i3" width="20"
                   height="20"><path
                  d="M919.920093 725.414549q3.014188 26.122962 7.033105 58.776664t7.53547 66.814498 7.53547 67.819227 7.033105 60.786122q6.028376 47.222277-41.193901 44.208089-25.118232-2.009459-56.767205-5.526011t-64.805039-7.53547-65.809769-8.037834-59.781393-7.033105q-29.137149-3.014188-37.174984-16.578033t9.042564-30.644243q11.052022-10.047293 27.127691-27.630056t27.127691-28.634785q11.052022-12.056752 7.033105-22.104044t-16.075669-23.108774q-28.13242-27.127691-51.241194-49.231735t-51.241194-51.241194q-6.028376-6.028376-12.056752-13.061481t-9.042564-15.573304-1.004729-18.085127 13.061481-20.59695q6.028376-6.028376 10.047293-10.549658t8.037834-8.037834 8.540199-8.037834 11.554387-12.559116q20.094586-20.094586 37.174984-17.080398t37.174984 23.108774 41.193901 40.691536 47.222277 46.719912q19.089857 18.085127 32.653702 25.118232t26.625326-6.028376q9.042564-9.042564 22.606409-21.60168t23.611138-22.606409q17.080398-17.080398 30.644243-13.061481t16.578033 30.141879zM43.79615 383.80659q-3.014188-26.122962-7.033105-58.776664t-7.53547-66.814498-7.53547-67.819227-7.033105-60.786122q-3.014188-26.122962 6.53074-36.170255t33.658431-8.037834q25.118232 2.009459 56.767205 5.526011t64.805039 7.53547 65.809769 8.037834 59.781393 7.033105q30.141879 3.014188 37.677348 16.578033t-9.544928 30.644243q-10.047293 10.047293-24.615868 26.122962t-25.620597 27.127691q-12.056752 12.056752-8.037834 22.104044t17.080398 23.108774q13.061481 14.06621 24.615868 24.615868t22.606409 21.099315 23.108774 22.606409l25.118232 25.118232q6.028376 6.028376 11.554387 14.06621t8.037834 17.080398-0.502365 19.089857-13.061481 20.094586l-11.052022 11.052022q-4.018917 4.018917-7.53547 8.037834t-8.540199 8.037834l-11.052022 12.056752q-20.094586 20.094586-34.663161 15.070939t-34.663161-25.118232-38.179713-37.677348-44.208089-43.705724q-18.085127-18.085127-32.151337-25.118232t-27.127691 6.028376q-9.042564 10.047293-25.118232 24.615868t-26.122962 24.615868q-17.080398 17.080398-30.141879 13.061481t-16.075669-30.141879zM905.853883 84.397261q26.122962-3.014188 36.170255 6.53074t8.037834 34.663161-5.526011 56.767205-7.53547 64.805039-8.037834 65.809769-7.033105 59.781393q-3.014188 29.137149-16.578033 37.174984t-30.644243-10.047293q-10.047293-10.047293-26.122962-24.615868t-27.127691-25.620597q-12.056752-11.052022-22.104044-7.53547t-23.108774 16.578033q-27.127691 27.127691-47.724641 49.231735t-48.729371 50.236465q-6.028376 6.028376-14.06621 11.554387t-17.080398 8.037834-19.089857-0.502365-20.094586-14.06621q-6.028376-6.028376-10.549658-10.047293t-8.540199-8.037834-8.540199-8.037834-11.554387-12.056752q-20.094586-20.094586-16.075669-35.165525t25.118232-35.165525l38.179713-40.189172q19.089857-20.094586 45.212818-46.217547 19.089857-18.085127 26.122962-32.151337t-7.033105-26.122962q-9.042564-9.042564-23.108774-24.615868t-24.113503-25.620597q-17.080398-17.080398-13.061481-30.141879t30.141879-16.075669 58.776664-7.033105 67.316863-7.53547 67.819227-7.53547 60.283758-7.033105zM350.238584 640.012559q6.028376 6.028376 10.549658 10.047293t8.540199 8.037834l8.037834 9.042564 12.056752 11.052022q20.094586 20.094586 17.582763 36.672619t-23.611138 37.677348q-19.089857 19.089857-40.189172 40.691536t-47.222277 47.724641q-18.085127 18.085127-22.606409 29.639514t8.540199 24.615868q10.047293 9.042564 22.606409 22.606409t22.606409 23.611138q17.080398 17.080398 12.559116 30.141879t-30.644243 16.075669-58.274299 7.033105-66.814498 8.037834-68.321592 8.037834-60.786122 7.033105q-25.118232 2.009459-35.66789-7.53547t-8.540199-33.658431q2.009459-25.118232 5.526011-56.767205t7.53547-64.805039 8.037834-65.809769 7.033105-59.781393q3.014188-30.141879 16.578033-37.677348t30.644243 9.544928q10.047293 10.047293 27.630056 26.122962t28.634785 27.127691q12.056752 12.056752 20.094586 10.549658t20.094586-14.568575q13.061481-13.061481 25.118232-25.620597t24.113503-24.615868 24.615868-25.118232 26.625326-27.127691q6.028376-6.028376 13.061481-12.056752t15.573304-9.042564 18.085127-0.502365 20.59695 13.563845z"
                  p-id="3915" fill="#dbdbdb"></path></svg>
                 </span>
              </div>
              <div ref="jsonInput" style="width: 100%; height: 100%;text-align:left;"></div>
            </div>
          </el-col>
          <el-col :span="17" style="height:100%" class="debug">
            <div style="width: 100%; height: 100%;text-align:left;">
              <SquareLakeFlowServicesRunner ref="runner"></SquareLakeFlowServicesRunner>

            </div>
          </el-col>
        </el-row>
      </div>
    </Drawer>
  </div>
</template>

<script>
import XHandle from "@/views/process/XHandle.vue";
import * as monaco from "monaco-editor";
import SquareLakeFlowServicesRunner from "@/views/process/SquareLakeFlowServicesRunner.vue";
import {post} from "@/config/Request.js";
import {Ws} from '../../config/Ws.js'
import {toRaw} from 'vue'
import api from "@/request/apis.js";
import apis from "@/request/apis.js";

export default {
  name: 'SquareLakeFlowServices',
  components: {XHandle, SquareLakeFlowServicesRunner},
  props: ["id", "version", "findInputStepInfo", "mockRun", "resetParam", "stepLogCollect", "removePause", "mockError", "stepStatus", "stepInput", "stepOutput", "mockSuccess"],
  data() {
    return {
      drawer: false,
      size: 300,
      direction: 'btt',
      name: "",
      tid: "",
      isMaximum: false,
      originSize: {
        width: '',
        height: ''
      },
      running: false,
      monacoEditor: null
    };
  },
  mounted() {

  },
  methods: {
    widthChange(movement) {
      this.size -= movement;
      if (this.size < 300) {
        this.size = 300;
      }
      if (this.size > 700) {
        this.size = 700;
      }
    },
    async resume() {
      const s = await api.stepResume({
        id: this.id,
        tid: this.tid,
        processVersion: this.version
      });
      // this.removePause();
    },
    async transResumeAll() {
      const s = await api.transResumeAll({
        id: this.id,
        processVersion: this.version,
        tid: this.tid
      });
      this.removePause();
    },
    async resumeAll() {
      const s = await api.resumeAll({
        id: this.id,
        processVersion: this.version
      });
      this.removePause();
    },
    jsonInputMax() {
      if (this.monacoEditor) {
        if (this.isMaximum) {
          this.min();
        } else {
          this.max();
        }

      }
    },
    async stepPause(stepId) {
      const s = await api.stepPause({
        id: this.id,
        tid: this.tid,
        processVersion: this.version,
        stepId
      });
    },
    resetParamFunc() {
      let cb = this.resetParam();
      console.log(cb)
      if (!cb) {
        cb = " {\n" +
            "    \"a\":\"\"\n" +
            "}"
      } else {
        cb = JSON.stringify(cb, null, 2);
      }
      toRaw(this.monacoEditor).setValue(cb);
    },
    async run(params) {
      if (this.running) {
        return;
      }
      this.running = true;
      if (params) {
        console.log(params)
        toRaw(this.monacoEditor).setValue(params);
      }
      let c = toRaw(this.monacoEditor).getValue();

      var par = {
        type: "run",
        id: this.id,
        processVersion: this.version,
        param: c
      }
      this.$refs.runner.clear();
      this.mockRun();
      this.ws.send(JSON.stringify(par));
    },
    min() {
      this.isMaximum = false
      let dom = document.getElementById("editorFlag")
      dom.style.zIndex = "";

      dom.classList.remove('editor-fullscreen')

      let maxIcon = document.getElementById("lvv");
      maxIcon.style.right = ""
      maxIcon.style.left = "400px";
      toRaw(this.monacoEditor).layout({
        height: this.originSize.height,
        width: this.originSize.width
      })
    },
    max() {
      this.isMaximum = true
      let dom = document.getElementById("editorFlag")
      dom.style.zIndex = "9999";
      this.originSize = {
        width: dom.clientWidth,
        height: dom.clientHeight
      }
      dom.classList.add('editor-fullscreen')
      let maxIcon = document.getElementById("lvv");
      maxIcon.style.right = "20px"
      maxIcon.style.left = "";
      toRaw(this.monacoEditor).layout({
        height: document.body.clientHeight,
        width: document.body.clientWidth
      })
    },
    init() {

      // 使用 - 创建 monacoEditor 对象
      if (this.monacoEditor) {
        this.$refs.runner.init();
        return;
      }
      setTimeout(function () {
        this.$refs.runner.init();
        monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
          validate: false
        });

        let cb = this.findInputStepInfo();
        if (!cb) {
          cb = " {\n" +
              "    \"a\":\"\"\n" +
              "}"
        } else {
          cb = JSON.stringify(cb, null, 2);
        }
        this.monacoEditor = monaco.editor.create(this.$refs.jsonInput, {
          theme: "vs-dark", // 主题
          value: cb, // 默认显示的值
          language: "json",
          folding: true, // 是否折叠
          foldingHighlight: true, // 折叠等高线
          foldingStrategy: "indentation", // 折叠方式  auto | indentation
          showFoldingControls: "always", // 是否一直显示折叠 always | mouseover
          disableLayerHinting: true, // 等宽优化
          emptySelectionClipboard: false, // 空选择剪切板
          selectionClipboard: false, // 选择剪切板
          automaticLayout: true, // 自动布局
          codeLens: false, // 代码镜头
          scrollBeyondLastLine: false, // 滚动完最后一行后再滚动一屏幕
          colorDecorators: true, // 颜色装饰器
          accessibilitySupport: "off", // 辅助功能支持  "auto" | "off" | "on"
          lineNumbers: "on", // 行号 取值： "on" | "off" | "relative" | "interval" | function
          lineNumbersMinChars: 5, // 行号最小字符   number
          enableSplitViewResizing: false,
          readOnly: false, //是否只读  取值 true | false
        });

      }.bind(this), 0);

    },
    async show() {
      this.drawer = true;
      this.init();

      if (null == this.ws) {
        this.tid = await apis.post("/square-lake/process/test/get_tid", null);
        //建立连接
        this.ws = await Ws("/square-lake/ws/" + this.tid, function (d) {

          var db = d.data;

          var jso = JSON.parse(db);

          const logStr = this.logAndStepStatusFormat(jso);

          if (jso.type == 'log') {
            if (logStr) {
              this.$refs.runner.appendLog(logStr);
            }
          } else if (jso.type == 'result') {
            this.$refs.runner.appendLog(`执行结束 结果${JSON.stringify(logStr) || ''}`);
            this.running = false;
            this.transResumeAll();
            // this.mockSuccess();
          } else if (jso.type == 'error') {
            if (logStr) {
              this.$refs.runner.appendLog(`执行异常>>>${logStr || ''}`);
            }
            // this.mockError();
            this.running = false;
            this.transResumeAll();
          }


        }.bind(this), function () {
          this.running = false;
          this.ws = null;
          this.show();
        }.bind(this));
      }
    },
    logAndStepStatusFormat(data) {
      if (!data) {
        return
      }
      const dataStr = data.data;
      let message = dataStr || data.param || "";
      let processVersion = data.processVersion || "";
      let threadId = "";
      let threadName = "";
      let timestamp = "";
      let processName = "";
      let logLevel = "";
      let stepName = "";
      try {
        const data = JSON.parse(dataStr);

        if (data.stepStatus && data.stepStatus.length > 0) {
          this.stepStatus(data);
          return "";
        }
        threadId = data.threadId;
        threadName = data.threadName;
        processVersion = data.processVersion || "";
        timestamp = data.timestamp;
        processName = data.processName;
        logLevel = data.logLevel;
        stepName = data.stepName;
        message = data.message;

        if (data.input) {
          this.stepInput(stepName, data.input);
          return "";
        }
        //如果输出的不是对象，需要转成对象不然会出问题
        if (data.output) {
          if (typeof data.output != 'object') {
            data.output = {
              "args0": data.output
            }
          }
          this.stepOutput(stepName, data.output);
          return "";
        }
      } catch (e) {
        return message;
      }
      const str = `${threadId} - ${threadName} - ${timestamp} - ${processName} - ${processVersion} - ${logLevel} - ${stepName} - ${message}`;
      if (stepName) {
        this.stepLogCollect(stepName, str);
      }
      return str;
    },
    close() {
      if (null != this.ws) {
        this.ws.close();
        this.ws = null;
      }
      // this.ws.close();
      this.drawer = false;
      // this.$refs.service_drawer.handleClose();
    }
  },
  created() {
  }
}
</script>
<style scoped>
.debug {
  border: #ccc solid 1px
}

.editor-fullscreen {
  position: fixed !important;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100% !important;
  z-index: 1000;
}

</style>
